import React from 'react';
import { Form, Input, Button, Tooltip } from 'antd';
import { CopyOutlined, BulbOutlined } from '@ant-design/icons';
import './UrlAdd.css';

const UrlAdd: React.FC = () => {
  const handleCopy = () => {
    // 复制链接逻辑
    navigator.clipboard.writeText("https://pcx.cc/g/YPZ29F");
  };

  return (
    <div className="linkinvite-container">
      <h2>链接邀请</h2>
      <p className="linkinvite-tips">
        <span><BulbOutlined style={{ fontSize: '1.125rem', marginRight: '0.125rem' }} /> Tips:</span> 邀请链接有效期 7 天，将此链接发送给需要邀请的成员，成员通过此链接可以加入组织
      </p>
      <Form layout="vertical">
        <span className='url-input-title'>
          邀请链接
        </span>
        <Form.Item className="linkinvite-form-item">
          <div className="linkinvite-input-group">
            <Input
              value="https://pcx.cc/g/YPZ29F"
              readOnly
              className='linkinvite-input'
            />
            <Tooltip title="复制链接">
              <Button icon={<CopyOutlined />} onClick={handleCopy} className="linkinvite-copy-button">
                复制
              </Button>
            </Tooltip>
          </div>
        </Form.Item>
        <Form.Item>
          <Button className="linkinvite-reset-button" type="primary">
            重置链接
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default UrlAdd;
